<template>
    <header class="head-nav">
        <el-row>
            <el-col :span="6" class='logo-container'>
                <img src="../assets/logo.png" class='logo' alt="">
                <span class='title'>志权后台管理系统</span>
            </el-col>
            <el-col :span='6' class="user">
                <div class="userinfo">
                    <img :src="user.avator" class='avatar' alt="">
                     <div class='welcome'>
                        <p class='name comename'>欢迎</p>
                        <p class='name avatarname'>{{user.name}}</p>
                    </div>
                    <!-- 下拉菜单 -->
                    <span class="dropdown">
                        <el-dropdown trigger="click" @command="handleCommand">
                            <span class="el-dropdown-link">
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="info">个人信息</el-dropdown-item>
                                <el-dropdown-item command="exit">退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </span>
                </div>
            </el-col>
        </el-row>
    </header>
</template>
<script>
export default {
  name: "HeadNav",
  data () {
    return {
    };
  },
  computed:{
      user(){
          return this.$store.getters.user
      }
  },
  methods: {
      handleCommand(item){
          switch(item){
              case "info":
                this.toInfo()
                break
              case "exit":
                this.toExit()
                break
          }
      },
      toInfo(){
          this.$router.push("/infoshow")
      },
      toExit(){
        // 清除 token
        localStorage.removeItem("Token")
        // 清除用户信息
        this.$store.dispatch("clearInfo")
        // 跳转回登录页面
        this.$router.push("/login")
      }
  },
}
</script>
<style scoped>
    .head-nav{
        width: 100%;
        height: 60px;
        background-color: #324057;
        color: #fff;
        /* min-width: 600px; */
    }
    .logo-container{
        display: flex;
        align-items: center;
        float: left;
        min-width: 400px;
    }
    .logo-container .logo{
        width: 50px;
        height: 50px;
        margin-top: 5px;
    }
    .logo-container .title{
        font-family: "Microsoft YaHei";
        font-weight: bold;
        font-size: 22px;
        /* 每个字分隔3px */
        letter-spacing: 3px;
        margin-left: 8px;
    }
    .title {
       vertical-align: middle;
       font-size: 22px;
       font-family: "Microsoft YaHei";
       letter-spacing: 3px;
    }
    .user {
        line-height: 60px;
        text-align: right;
        float: right;
        padding-right: 10px;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 40px;
        vertical-align: middle;
        display: inline-block;
    }
    .welcome {
        display: inline-block;
        width: auto;
        vertical-align: middle;
        padding: 0 5px;
        font-size: 12px;
    }
    .name {
        line-height: 20px;
        text-align: center;
        font-size: 14px;
    }
    .comename {
        font-size: 12px;
    }
    .avatarname {
        color: #409eff;
        font-weight: bolder;
    }
    .dropdown{
        cursor: pointer;
        margin-right: 5px;
    }
    .el-dropdown{
        color: #fff;
    }
</style>